<template>
	<div class="view-writeAddress">
		<van-nav-bar title="填写地址" left-arrow @click-left="hidePage" />
		<van-cell-group>
			<van-field readonly clickable :value="city" placeholder="选择城市" @click="showPicker = true"/>
			<van-field v-model="name" placeholder="请输入收件人姓名" />
			<van-field v-model="phoneNumber" placeholder="请输入收件人手机号码" />
			<van-field v-model="address" placeholder="请输入详细地址" />
		</van-cell-group>
		<van-popup v-model="showPicker" position="bottom">
			<van-picker show-toolbar :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" @change="onChange"  value-key="name"/>
		</van-popup>
		<div class="button-wrapper">
			<van-button class="button" type="primary" @click="save()">确定</van-button>
		</div>
	</div>
</template>
<script>
	import Vue from 'vue';
	import {
		Picker
	} from 'vant';
	import userApi from "@/api/user"
	Vue.use(Picker);
	export default {
		data() {
			return {
				city: "",
				showPicker: false,
				columns: [],
				columnNum: 3,
				name: "",
				phoneNumber: "",
				address: "",
				list: "",
				cityResult:null
			}
		},
		props: ["showFlag"],
		methods: {
			hidePage() {
				this.$emit("hide");
			},
			onConfirm(val) {
				this.cityResult = val;
				val.forEach(item=>{
					this.city += (item.name+",")
				});
				this.showPicker = false;
			},
			onChange (picker, values, index) {
				this.picker = picker
				if (values[index].children && values[index].children.length) {
					this.rawIndex(index + 1, values[index].children)
				}
			},
			getCityList() {
				userApi.getCityList().then(res => {
					let list = res.list;
					list = JSON.stringify(list)
						.replace(/areaId/g, 'value')
						.replace(/areaName/g, 'name')
						.replace(/children/g, 'children')
						.replace(/id/g, 'value')
					list = JSON.parse(list)
					this.loading = false;
					this.list = list
					console.log(list);
					this.initCityList()
				})
			},
			initCityList() {
				for (let index = 0; index < this.columnNum; index++) {
					this.columns[index] = {
						values: [],
						defaultIndex: 0
					}
				}
				this.rawIndex(0, this.list)
			},
			rawIndex(index, list) {
				if (index === this.columnNum) {
					return
				}
				if (this.picker) {
					this.picker.setColumnValues(index, list)
				} else {
					this.columns[index]['values'] = list
				}
				if (list.length && list[0].children && list[0].children.length) {
					this.rawIndex(index + 1, list[0].children)
				} else {
					this.rawIndex(index + 1, [])
				}
			},
			initPage() {
				this.getCityList();
			},
			submitAddress(data) {
				userApi.postAddress(data).then((res) => {
					console.log(res);
					this.hidePage()
				});
			},
			save() {
				this.submitAddress(this.organizeData());
			},
			organizeData(){
				let submitData={
					mobile:this.phoneNumber,
					username:this.name,
					address:this.address
				};
				let cityInfo = {
					city:this.cityResult[2].name,
					cityCode:this.cityResult[2].value,
					province:this.cityResult[1].name,
					provinceCode:this.cityResult[1].value,
					district:this.cityResult[0].name,
					districtCode:this.cityResult[0].value,
					zip: 7000
				}
				Object.assign(submitData,cityInfo);
				console.log(submitData);
				return submitData;
			}
		},
		created() {
			this.initPage();
		}
	}
</script>
<style lang="less" scoped>
	.view-writeAddress {
		width: 100vw;
		height: 100vh;

		.button-wrapper {
			position: fixed;
			bottom: 20px;
			left: 0;
			width: 100%;

			.van-button {
				width: 90%;
			}
		}
	}
</style>
